<template>
    <div class="mainContent qualityreasonset-container">
        <pathTracking :path='path' />
        <div style="padding: 2.4rem;">
            <advancedSearch
                style="margin-top: 1.5rem;"
                :option="filterOption"
                @onSearch="toSearch"
            />
            <el-row style="margin-top: 1.5rem;">
                <div class="common-table-title">
                    <div class="common-table-icon"></div>
                    <div class="common-table-fl">不良原因列表</div>
                    <div class="common-btn-group">
                        <div class="operate-btn" @click="typeControl">类别管理</div>
                        <div class="operate-btn" style="margin:0 1rem 0 1rem;" @click="addReason({})">添加不良原因</div>
                    </div>
                </div>
            </el-row>
            <el-row class="common-table-con">
                <el-table
                    :data="reasonTypeList"
                    :row-style="selectedHighlight"
                    max-height="550"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column
                        type="selection"
                        width="80"
                        align="center"
                    />
                    <el-table-column
                        v-for="(item, index) in reasonListItems"
                        :key="index"
                        :prop="item.prop"
                        :label="item.label"
                        :width="item.width"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div>
                                {{translateType(scope.row, item)}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="是否禁用"
                        min-width="120"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div class="table-switch" @click="changeSwitchStatus(scope.row)">
                                <img v-if="scope.row.status" src="@/assets/img/form_switches_off.png" alt="">
                                <img v-else src="@/assets/img/form_switches_on.png" alt="">
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        min-width="120"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div class="operate-btn" @click="addReason(scope.row)">编辑</div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row class="pagination-cont">
                    <el-pagination
                        @size-change="handleSizeChange"
                        background
                        @current-change="handleCurrentChange"
                        :current-page="currentPageIndex"
                        :page-sizes="pageSizeList"
                        :page-size="currentPageSize"
						:pager-count="5"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    >
                    </el-pagination>
                </el-row>
            </el-row>
            <!-- 添加不良原因弹出框 -->
            <badReasonPopup
                ref="badReasonPopup"
                :typeList="typeList"
                @updateList="debounceRequest"
            />
            <!-- 类别管理弹出框 -->
            <typeControlPopup
                ref="typeControlPopup"
                :typeList="typeList"
                @updateList="getBadReasons"
            />
        </div>
    </div>
</template>

<script>
import advancedSearch from "@/components/common/filter/advancedSearch"
import pathTracking from '@/components/common/pathTracking'
import { getReasonType, doSearch, modifyStatus, changeStatus } from './axios.js'
import badReasonPopup from './badReasonPopup'
import typeControlPopup from './typeControlPopup'
import datas from './datas.js'
export default {
    name: 'qualityreasonset',
    components:{
        // 路径
        pathTracking,
        // 高级搜索
        advancedSearch,
        // 添加不良原因弹出框
        badReasonPopup,
        // 类别管理弹出框
        typeControlPopup
    },
    computed: {
        lang () {
            return this.$t('lang')
        }
    },
    data () {
        return {
            path: ['供应商管理', '质检管理', '质检原因设置'],
            // 当前搜索条件
            currentSearchClue: '',
            // 筛选项
            filterOption: datas.filterOption,
            // 列表项
            reasonListItems: datas.reasonListItems,
            // 所有不良原因类型数组
            typeList: [],
            // 列表内容数组
            reasonTypeList: [],
            // 总页数
            total: 0,
            // 每页显示数据条数
            pageSizeList: [5, 10 ,20, 40],
            // 默认显示的数据条数
            currentPageSize: 5,
            // 当前页码
            currentPageIndex: 1,
            // 选中的数组
            TableSelectData: [],
            cardSelected: '',
            timer: null
        }
    },
    
    mounted() {
        this.getBadReasons()
    },
    methods: {
        // 获取不良原因
        async getBadReasons() { 
            let res = await getReasonType();
            if(res && res.data.status === 200) {
                let arr = [], conditions = res.data.result;
                this.typeList = res.data.result;
                conditions.forEach(item => {
                    let obj = {};
                    obj.label = item.value;
                    obj.value = item.key;
                    arr.push(obj);
                })
                this.filterOption.items.forEach(item => {
                    if(item.key === 'type') {
                        item.data = arr || []
                    }
                })
            }
        },
        // 查询
        async toSearch(val) {
            let obj = {}
            // 当前搜索条件
            this.currentSearchClue = val;
            val.map(ele => {
                obj[ele.key] = ele.value
            })
            console.log(obj, '查询条件')
            let param = {
                condition: obj,
                pageIndex: this.currentPageIndex,
                pageSize: this.currentPageSize,
                pageTotal: 5,
                total: 0
            }
            let res = await doSearch(param);
            if(res && res.data.status === 200) {
                console.log(res)
                this.reasonTypeList = res.data.result.result
                let temp = res.data.result
                this.total = temp.total
            }else {
                this.$message({
                    showClose: true,
                    message: '查询失败',
                    type: 'error'
                });
            }
        },
        translateType(param, item) {
            if(item.prop === "type") {
                let label;
                this.typeList.map(ele => {
                    if(ele.key == param.type) {
                        label = ele.value
                    }
                })
                return label
            }else {
                return param[item.prop] === '' ? '暂无' : param[item.prop]
            }
        },
        // 打开添加不良原因的弹出框
        addReason(data) {
            this.$refs.badReasonPopup.opendialog(data)
        },
        // 打开类别管理的弹出窗
        typeControl() {
            this.$refs.typeControlPopup.opendialog();
        },
        // 启用&禁用状态修改
        changeSwitchStatus (data) {
            let param = {
                id: data.id,
                status: data.status === 1 ? 0 : 1
            }
            changeStatus(param).then(res => {
                console.log(res,' changing status')
                if(res.data.status === 200) {
                    this.reasonTypeList.map(ele => {
                        if(ele.id === data.id) {
                            ele.status = (data.status === 1 ? 0 : 1)
                        }
                    })
                }
            }).catch(err => {
                
            })
        },
        // 修改?条/页
        handleSizeChange (size) {
            if(this.currentPageSize != size) {
                this.currentPageSize = size;
                this.debounceRequest();
            }
        },
        // 翻页
        handleCurrentChange (index) {
            if(this.currentPageIndex != index) {
                this.currentPageIndex = index;
                this.debounceRequest();
            }
        },
        debounceRequest() {
            if(this.timer) {
                clearTimeout(this.timer);
                this.timer = null
            }
            this.timer = setTimeout(() => {
                this.toSearch(this.currentSearchClue);
                clearTimeout(this.timer);
                this.timer = null;
            }, 300)
        },
        // -----------------------
        cardClick (color) {
            this.cardSelected = color;
        },
        handleClick() {

        },
        handleSelectionChange (selection) {
            // 选中的数组
            this.TableSelectData = selection;
        },
        selectedHighlight (data) {
        // 如果选中则添加高亮样式
            if (this.TableSelectData.indexOf(data.row) > -1) {
                return {
                    "background-color": "#FEF6EE"
                };
            }
        }
    }
}
</script>
<style scoped>
    .pagination-cont{
        height: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }
    .operate-btn {
        padding: 6px 14px;
        display: inline-block;
        border-radius: 14px;
        border: solid 1px #7e6b5a;
        font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #7e6b5a;
        cursor: pointer;
        line-height: 1;
    }
</style>
